<template>
	<div id="container">
		<div class="list"
		v-for="(list,i) in lists"
		:name="i"
		:class="{active: activeIndex === i}"
		:ref="'list'+i"
		@mousedown=mousedown(list,i,$event)
		@mouseup=mouseup(list,i)>初始排序:{{i}} 后手排序:{{!listData.length || listData[i].index}}</div>
	</div>
</template>
<script>
	export default{
		name:'side',
		data(){
			return {
				lists:[{},{},{},{},{},{}],
				base:{x:0,u:0},
				activeIndex: -1,
				emptyIndex: -1,
				listData:[],
				listDoms:[],
				poses: []
			}
		},
		mounted(){
			this.recordLocation();
		},
		methods:{
			recordLocation(){
				let lists = document.querySelectorAll('.list');
				let listData = [];
				lists.forEach((e,i) => {
					listData.push({
						el: e,
						top: e.getBoundingClientRect().top,
						height: e.getBoundingClientRect().height,
						thisTop: e.getBoundingClientRect().top,
						lastTop: e.getBoundingClientRect().top,
						transform: 0,
						index: i
					});
				})
				this.listData = listData;
				console.log(this.listData)
			},
			posIndex(y){
				let list = this.listData[this.activeIndex], index = '';
				let list_top = list.top + y;
				let i = 0;
				while(i < this.listData.length){
					// b_list指被挤开的list
					let b_list = this.listData[i];
					let b_list_top = b_list.thisTop;
					if( Math.abs(list_top - b_list_top) <= b_list.height/2) {
						this.emptyIndex = i;
						if(i !== this.activeIndex ) {
							let b_list_transform;
							// 移动元素往上走 被挤开元素往下
							if( list_top - b_list_top > 0) {
								b_list_transform = b_list.transform + list.height;
								b_list.index += 1;
								list.index -= 1;
							}
							// 移动元素往下走 被挤开元素往上
							else {
								b_list_transform = b_list.transform - list.height;
								b_list.index -= 1;
								list.index += 1;
							}
							b_list.lastTop = b_list_top;
							b_list.el.style.transform = 'translate3d(0,' + b_list_transform + 'px, 0)';
							b_list.transform = b_list_transform;
							b_list.thisTop = b_list.top + b_list_transform;
							break;
						}
						// break;
					}
					i++;
				}
			},
			mousedown(list,i, e){
				document.body.addEventListener('mousemove', this.mousemove);
				let el = this.listData[this.activeIndex];
				this.activeIndex = this.emptyIndex = i;
				this.base = {x: e.clientX, y: e.clientY};
			},
			mouseup(){
				let list = this.listData[this.activeIndex];
				// 尝试：本来这一段在transform之后 但如果空位list 就是 填补空位list自己的话 得先把自己的lastTop重定位成thisTop 否则lastTop就是上一次list的所在位置了
				list.lastTop = list.thisTop;
				let transform = this.listData[this.emptyIndex].lastTop - list.top;
				list.el.style.transform = 'translate3d(0,' + transform + 'px, 0)';
				list.transform = transform;
				list.thisTop = this.listData[this.emptyIndex].lastTop;
				console.log('空位list的index:'+this.emptyIndex)
				console.log('空位list的空出坐标:' + this.listData[this.emptyIndex].lastTop)

				this.activeIndex = this.emptyIndex = -1;
				this.lastEmptyIndex = -2;
				document.body.removeEventListener('mousemove', this.mousemove);
			},
			mousemove(e){
				let list = this.listData[this.activeIndex];
				if(this.activeIndex === -1) return;
				var {x:x0, y:y0} = this.base;
				var x1 = e.clientX, y1 = e.clientY;
				list.el.style.transform = 'translate3d(0,'+ (list.transform + y1 - y0) +'px,0)';
				this.posIndex(list.transform + y1 - y0);
			}
		}
	}
</script>
<style lang='less' scoped>
	#container{
		width: 200px;
	}
	.list{
		border:1px solid #dbe9ef;
		background: pink;
		width: 100%;
		height: 50px;
		user-select: none;
		position: relative;
		&.active{
			border-color: skyblue;
			z-index: 10;
			background-color: #e47689;
		}
	}
</style>